<template>
  <div class="user-behavior-review">
    <div class="search">
      <div class="box">
        <el-input placeholder="请输入" v-model="state.searchValue" class="input-with-select">
          <el-select v-model="state.searchType" slot="prepend" placeholder="请选择">
            <el-option v-for="item of state.searchFields" :label="item.label" :key="item.value" :value="item.value"></el-option>
          </el-select>
        </el-input>
      </div>
      <div class="search-btn">
        <el-button type="primary" class="my-button" :icon="Search">搜索</el-button>
        <el-button class="search-btn" @click="openSenior" type="primary" :icon="!state.isShowSenior ? ArrowDown : ArrowUp">高级搜索</el-button>
      </div>
    </div>

    <AdvancedSearchs v-if="state.isShowSenior" :width="120" :searchFields="state.searchFields" />

    <div class="table-con">
      <el-table
        height="100%"
        empty-text="暂无数据"
        :header-cell-style="elTableStyle.headerCellStyle"
        border
        class="my-table"
        :data="state.tableData">
        <el-table-column
          label="国际移动设备识别码"
          align="center"
          show-overflow-tooltip
          prop="device_code">
        </el-table-column>
        <el-table-column
          label="国际移动用户识别码"
          align="center"
          show-overflow-tooltip
          prop="user_code">
        </el-table-column>
        <el-table-column
          label="手机号码"
          show-overflow-tooltip
          align="center"
          prop="phone_number">
        </el-table-column>
        <el-table-column
          label="邮箱账号"
          show-overflow-tooltip
          align="center"
          prop="mail">
        </el-table-column>
        <el-table-column
          label="邮箱昵称"
          align="center"
          show-overflow-tooltip
          prop="mail_nickname">
        </el-table-column>
        <el-table-column
          label="电话号码"
          align="center"
          show-overflow-tooltip
          prop="Landline">
        </el-table-column>
        <el-table-column
          label="详情"
          width="120"
          align="center">
          <template #default="scope">
            <div>
              <span class="operate" @click="details(scope.row)">
                <el-icon :size="18">
                  <View />
                </el-icon>
              </span>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-config-provider :locale="customPagination">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="state.currentPage"
          :page-size="20"
          layout="total, prev, pager, next, jumper"
          :total="state.tableData.length">
        </el-pagination>      
      </el-config-provider>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Search, ArrowDown, ArrowUp, View } from '@element-plus/icons-vue';
import AdvancedSearchs from "../../../components/AdvancedSearchs/advanced-searchs.vue";
import elTableStyle from "../../../config/third-plugins/element/elTable";
import customPagination from "../../../config/third-plugins/customPagination";

const router = useRouter()

interface ubr {
  searchValue:string,
  searchType:string,
  searchFields:Array<any>,
  isShowSenior:boolean,
  tableData:Array<any>,
  currentPage:number
}

const state = reactive<ubr>({
  searchValue: '',
  searchType: '',
  searchFields: [
    {
      label: '国际移动设备识别码',
      value: 'device_code'
    },
    {
      label: '国际移动用户识别码',
      value: 'user_code'
    },
    {
      label: '手机号码',
      value: 'phone'
    },
    {
      label: '邮箱',
      value: 'mailbox'
    }
  ],
  isShowSenior: false,

  tableData: [
    {
      id: 1,
      device_code: '3136723345844075',
      user_code: '7492234764155000',
      phone_number: '17369198734',
      mail: '7550639708@qq.com',
      mail_nickname: 'Ahai',
      Landline: '45615415',
      FTP: '48465451',
      remote: '44544448',
      update_time: '2023-09-13 14:05:00'
    },
    {
      id: 2,
      device_code: '5311340555083007',
      user_code: '3040477752918378',
      phone_number: '18953343389',
      mail: '8264329531@qq.com',
      mail_nickname: 'DUDI',
      Landline: '-',
      FTP: '-',
      remote: '-',
      update_time: '2023-09-14 14:05:00'
    },
    {
      id: 3,
      device_code: '3852176069747657',
      user_code: '1626115535385907',
      phone_number: '15715604041',
      mail: '2407084527@qq.com',
      mail_nickname: 'Wudali',
      Landline: '-',
      FTP: '-',
      remote: '-',
      update_time: '2023-07-13 14:05:00'
    }
  ],

  currentPage: 1
})

const openSenior = () => {
  state.isShowSenior = !state.isShowSenior
}

const details = (data:any) => {
  router.push({
    name: 'UserBehaviorReviewDetails',
    query: {
      id: data.id
    }
  })
}

const handleCurrentChange = () => {}
</script>

<style scoped lang="scss">
.user-behavior-review {
  position: relative;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  // padding: 20px 20px 18px 20px !important;
  box-sizing: border-box;
  .search {
    margin-bottom: 15px;
    display: flex;
    .box {
      display: flex;
      align-items: center;
      :deep(.el-date-editor) {
        margin-right: 10px;
      }
      :deep(.input-with-select) {
        width: 500px;
      }
      :deep(.el-input-group__prepend) {
        background-color: #fff;
        width: 130px;
      }
    }
    .search-btn {
      margin-left: 10px;
    }
  }

  .senior {
    min-height: 200px;
  }

  .table-con {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    .el-icon-more::before {
      position: absolute;
      right: -4px;
      top: 12px;
      z-index: 9999;
      transform: rotate(90deg);
      color: #409eff;
      cursor: pointer;
      background-color: #fff;
    }

    .my-table {
      .operate {
        display: inline-block;
        margin-right: 8px;
        color: #0f89f1;
        cursor: pointer;
        i::before {
          color: #0f89f1;
          display: inline-block;
          font-size: 18px;
          position: relative;
          top: 3px;
        }
      }
    }

    :deep(.el-pagination) {
      align-self: end;
      margin-top: 18px;
    }
  }
  :deep(.el-table th.el-table__cell) {
    .cell {
      border-right: 1px solid #ccc;
    }
  }
  :deep(.el-table th.el-table__cell:nth-last-child(2)) {
    .cell {
      border-right: none;
    }
  }
  :deep(.el-table--border) {
    border: none;
  }
  :deep(.el-table--border .el-table__cell) {
    border: none;
    border-bottom: 1px solid #ebeef5;
  }
  :deep(.el-table--border::after) {
    background-color: #fff;
  }

  :deep(.el-table__border-left-patch) {
    background-color: #fff;
  }
}
</style>